<template>
  <div class="warp" ref="backTop">
    <div class="top-title">
      <div class="bg1">
        <img src="../assets/img/white_top.png" style="width: 100%" />
        <!-- 中英文 -->
        <div class="lang">
          <img
            :class="language === 'cn' ? 'active' : ''"
            src="../assets/img/cn.png"
            style="width: 24px; height: 18px; margin-right: 5px"
            alt=""
            @click="changeLanguage('cn')"
          />
          <img
            :class="language === 'en' ? 'active' : ''"
            src="../assets/img/en.png"
            style="width: 16px; height: 18px"
            alt=""
            @click="changeLanguage('en')"
          />
        </div>
      </div>
      <!--div class="bg2"></div-->
      <div class="title" :style="titleStyle">
        <img class="img1" src="../assets/img/top.png" />
        <img class="img2" src="../assets/img/VAVE_black.png" alt="" />
        <img class="img3" src="../assets/img/tfg_logo_black.png" alt="" />
      </div>
    </div>

    <div class="top-brand" :style="divStyle">
      <img src="../assets/img/icon2.png" alt="" :style="imgStyle" />
    </div>

    <div style="padding-top: 1.6rem"></div>

    <div class="heading">
      <div class="title" :style="headingOpacity">
        <img
          v-if="language == 'cn'"
          src="../assets/img/Heading_cn.png"
          style="width: 16.5%"
        />
        <img v-else src="../assets/img/Heading_en.png" style="width: 16.5%" />
      </div>
    </div>

    <div class="introduce">
      <img
        v-if="language == 'cn'"
        src="../assets/img/body_cn.png"
        style="width: 100%"
      />
      <img v-else src="../assets/img/body_en.png" style="width: 100%" />
    </div>

    <div class="title-list">
      <img src="../assets/img/dasdas.png" style="width: 300px" alt="" />
      <img class="path1" src="../assets/img/Path_11.png" alt="" />
      <img class="path2" src="../assets/img/Path_11.png" alt="" />
      <div class="make" v-if="language == 'cn'">
        <img src="../assets/img/make_cn.png" style="width: 300px" alt="" />
      </div>
      <div class="make" v-else>
        <img src="../assets/img/make_en.png" style="width: 300px" alt="" />
      </div>
    </div>

    <div class="content-list">
      <div v-masonry>
        <transition name="warp">
          <div class="popup" v-if="isShow" @click="popupBtn">
            <div class="top">
              <img src="../assets/img/icon2.png" alt="" />
            </div>
          </div>
        </transition>
        <div
          class="list"
          v-masonry-tile
          v-for="(item, i) in dataList"
          :key="i"
          @click="imgBtn(item, i)"
          ref="listRef"
        >
          <div class="list-box">
            <div class="pic">
              <img :src="item.img" alt="图片" />
            </div>
            <p class="time">{{ item.time }}</p>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>

    <transition
      name="img"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div class="popup-content" v-if="isShow" @click="popupBtn" ref="imgRef">
        <transition>
          <img :src="popup.img" alt="" />
        </transition>
        <div class="box">
          <div class="left">
            <p class="time">{{ popup.time }}</p>
            <div class="title">{{ popup.title }}</div>
          </div>
          <div class="right">
            <!--              <img src="../assets/img/download.png" alt="" @click.stop="downloadBtn">-->
            <img src="../assets/img/share.png" alt="" @click.stop="shareBtn" />
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue'
import { VueMasonryPlugin } from 'vue-masonry'

Vue.use(VueMasonryPlugin)
export default {
  data() {
    return {
      language: 'cn',
      divStyle: {
        top: '1rem',
      },
      imgStyle: {
        width: '',
      },
      titleStyle: {
        opacity: 1,
      },
      headingOpacity: {
        opacity: 1,
      },
      isShow: false,
      popup: {
        img: '',
        time: '',
        title: '',
      },
      dataList: [
        {
          img: require('../assets/img/pic.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic2.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic2.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic3.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic2.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic2.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic3.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
        {
          img: require('../assets/img/pic2.png'),
          time: '2023-05-25',
          title: 'Lorem ipsum dolor sit amet',
        },
      ],
    }
  },

  mounted() {
    // 从缓存获取语言
    this.language = localStorage.getItem('language') || 'cn'
    window.addEventListener('scroll', this.handleScroll, true)
  },

  methods: {
    changeLanguage() {
      this.language = this.language === 'cn' ? 'en' : 'cn'
      localStorage.setItem('language', this.language)
    },
    beforeEnter(el) {
      console.log(el, 11111)
      // el.style.transition ='all 1s';
      // el.style.position = 'fixed';
      // el.style.background = '#000';
      // el.style.left ='0';
      // el.style.top ='0';
    },
    enter(el) {
      console.log(el, 22222)
      // el.style.transition ='all 1s';
      // el.style.background = '#f00';
      // el.style.left ='0';
      // el.style.top ='0.5rem';
    },
    afterEnter(el) {
      console.log(el, 33333)
      // el.style.transition ='all 1s';
      // el.style.position = 'fixed';
      // el.style.left ='0';
      // el.style.top ='0.5rem';
    },
    beforeLeave(el) {
      console.log(el, 4444444)
      // el.style.background = '#000';
    },
    leave(el) {
      console.log(el, 5555555)
      // el.style.background = '#000';
    },
    afterLeave(el) {
      console.log(el, 66666666)
      // el.style.background = '#000';
    },

    ceshiBtn() {
      this.isShow = true
    },

    imgBtn(item, i) {
      console.log(item, i, '点击')
      // console.log(this.$refs.listRef[index].style);
      // console.log(document.querySelectorAll('.list')[index].style)
      // let list = document.querySelectorAll('.list')[index];
      // let style1 = this.$refs.listRef[index].style
      // console.log(item, '##');
      // this.isactive = i
      this.popup = item
      this.isShow = true
      // if(this.isShow){
      //   list.style.top='0.5rem'
      //   list.style.left='10%'
      //   list.style.width='80%'
      //   list.style.boxSizing='border-box'
      //   list.style.position='fixed'
      //   list.style.transition='all 0.6s'
      //   list.style.zIndex='9'
      // } else {
      //   console.log(22);
      // }
    },

    popupBtn() {
      this.isShow = false
      this.isactive = ''
    },

    downloadBtn() {
      console.log('下载')
    },

    shareBtn() {
      console.log('分享')
    },

    handleScroll() {
      let height = window.pageYOffset
      let top = (500 - height) / 500
      let width = ((500 - height) / 500) * 100
      // console.log('滚动高度', window.pageYOffset)
      // console.log(top, width, '！！！！！', height)

      if (top > 0 && top < 50) {
        let op = (50 - height) / 50
        this.headingOpacity = {
          opacity: op,
        }
      }
      // 滚动的时候 titleStyle 渐渐消失
      if (height > 0 && height < 500) {
        if (top > 0.2) {
          this.divStyle = {
            top: top + 'rem',
          }
        } else {
          this.divStyle = {
            top: '0.2rem',
          }
        }

        if (width > 46) {
          this.imgStyle = {
            width: width + '%',
          }
        } else {
          this.imgStyle = {
            width: '46%',
          }
        }
        this.titleStyle = {
          top: top * 0.42 - 0.2 + 'rem',
        }
        if (height > 450) {
          this.titleStyle = {
            opacity: 0,
          }
        }
      } else if (height === 0) {
        this.titleStyle = {
          opacity: 1,
        }
        this.divStyle = {
          top: '1rem',
        }
        this.imgStyle = {
          width: '100%',
        }
      } else if (height < 0) {
        this.divStyle = {
          top: '1rem',
        }
        this.imgStyle = {
          width: '100%',
        }
      } else {
        this.titleStyle = {
          opacity: 0,
        }
        this.divStyle = {
          top: '0.2rem',
        }
        this.imgStyle = {
          width: '46%',
        }
      }
    },
  },
}
</script>

<style lang="scss">
.warp {
  line-height: 0.24rem;
  .top-title {
    width: 100%;
    height: 0.5rem;
    font-size: 0.22rem;
    font-weight: bold;
    line-height: 0.5rem;
    text-align: right;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;

    .title {
      position: absolute;
      left: 0.22rem;
      top: 0.2rem;
      display: flex;
      align-items: center;
      .img1 {
        width: 44px;
        margin-right: 8px;
      }
      .img2 {
        width: 40px;
        margin-right: 8px;
      }
      .img3 {
        width: 38px;
      }
    }

    .bg1 {
      width: 100%;
      height: 0.35rem;
      position: relative;
      .lang {
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
        display: flex;
        align-items: center;
        img {
          opacity: 0.7;
          transition: all 0.2s;
        }
        .active {
          transform: scale(1.2);
          opacity: 1;
        }
      }
      /*background: #fff;*/
      /*box-shadow: 0 15px 30px  rgba(255, 255, 255, .4);*/
    }

    .bg2 {
      width: 100%;
      height: 0.35rem;

      background: url('../assets/img/icon4.png');
      //background-image: linear-gradient(to top, transparent, #fff);

      //background-image: linear-gradient(#ffffff, #F282AE, #20E2CD);
    }
  }

  .top-brand {
    width: 86%;
    height: auto;
    position: fixed;
    top: 1rem;
    left: 7%;
    text-align: center;
    z-index: 2;

    img {
      width: 100%;
      display: inline-block;
    }
  }

  .heading {
    margin-top: 0.7rem;
    padding: 0 0.2rem;

    .title {
      border-top: 0.01em #ff7bac solid;
      color: #ff7bac;
      font-size: 0.2rem;
      padding-top: 0.12rem;
    }
  }

  .heading-list {
    margin-top: 0.5rem;

    .title-list {
      border-top: 0.01em #ff7bac solid;
      color: #ff7bac;
      font-size: 0.2rem;
      padding-top: 0.2rem;
      padding-left: 0;
    }
  }

  .introduce {
    font-size: 0.14rem;
    margin-top: 0.25rem;
    padding: 0 0.2rem;
    line-height: 0.24rem;
  }

  .title-list {
    display: table;
    padding: 0 0.2rem;
    box-sizing: border-box;
    margin-top: 0.4rem;
    width: 100%;
    line-height: 0.24rem;
    position: relative;
    .make {
      position: absolute;
      bottom: 0;
    }
    .path1,
    .path2 {
      position: absolute;
      width: 12px;
      height: 12px;
    }
    .path1 {
      top: 28px;
      left: 210px;
    }
    .path2 {
      top: 98px;
      left: 212px;
    }
    .left {
      width: 50%;
      display: table-cell;
      color: #ff7bac;
    }

    .right {
      width: 50%;
      display: table-cell;
    }
  }

  .content-list {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 0.2rem;
    margin-top: 0.3rem;
    background-image: linear-gradient(#ffffff, #f282ae, #20e2cd);

    .list {
      width: 48%;
      display: inline-block;
      margin: 0.2rem 1%;

      .pic {
        width: 100%;

        img {
          width: 100%;
          height: auto;
        }
      }

      .time {
        margin-top: 0.1rem;
        color: #333;
        font-size: 0.14rem;
      }

      .title {
        color: #fff;
        font-size: 0.12rem;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
      }
    }
    .addclass {
      width: 80%;
      display: inline-block;
      margin: 10%;
      background: #f00;
      transition: all 1s;
      z-index: 9;
      position: fixed;
      top: 0.5rem;
      left: 0;
    }
  }

  .popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background-image: linear-gradient(
      rgb(102, 157, 166, 1),
      rgb(32, 226, 205, 0.5)
    );
    backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;

    .top {
      width: 100%;
      padding: 0 10%;
      box-sizing: border-box;
      height: 0.6rem;
      text-align: center;
      line-height: 0.6rem;
      /*background: linear-gradient(to top, transparent, #fff);

       */
      background: url('../assets/img/white_top_2.png');
      background-size: 100% 100%;
      img {
        display: inline;
        width: 49.2%;
        margin-top: 0.2rem;
      }
    }
  }

  .popup-content {
    width: 100%;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0.5rem;
    z-index: 9;
    img {
      display: inline;
      width: 70%;
      margin-top: 0.2rem;
    }

    .box {
      width: 100%;
      display: table;

      .left {
        width: 60%;
        padding-left: 15%;
        display: table-cell;
        vertical-align: middle;
        text-align: left;

        .time {
          margin-top: 0.1rem;
          color: #333;
          font-size: 0.14rem;
          text-align: left;
        }

        .title {
          text-align: left;
          color: #fff;
          font-size: 0.12rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 2; //行数
          line-clamp: 2;
          -webkit-box-orient: vertical; //盒子中内容竖直排列
        }
      }

      .right {
        width: 40%;
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        padding-right: 15%;

        img {
          display: inline-block;
          width: 0.35rem;
          margin-left: 0.1rem;
          border-radius: 50%;
        }
      }
    }
  }
}

.img-enter-active {
  //类名：隐藏到显示过程所需要的时间
  animation: bounce-in 0.6s;
}

.img-leave-active {
  //类名：显示到隐藏过程所需要的时间
  animation: bounce-in 0.6s reverse; //reverse表示和隐藏到显示动画相反
}

.img-leave, // 离开前,进入后透明度是1
.img-enter-to {
  opacity: 1;
}

.img-leave-active {
  transition: all 0.4s; //过度是0.6秒
}
.img-enter-active {
  transition: all 0.6s; //过度是0.6秒
}

.img-leave-to,
.img-enter {
  opacity: 0;
  filter: blur(5px);
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
</style>
